{% extends "registration/base1.html" %}
{%load i18n %}
{% block content %}
{% autoescape off %}
<div id="comment" xmlns="http://www.w3.org/1999/html">
    <h2>{% trans 'Bình luận bài viết' %}</h2>
    <div id="user_cm">
        <img src="{{STATIC_URL}}images/a.jpg"/>

        <textarea name="content" id="content" placeholder="{% trans 'Viết bình luận của bạn...' %}"
            {% if user.is_authenticated %}
                  onkeydown="if (event.keyCode == 13)
                        test(document.getElementById('content').value, document.getElementById('userid').value, document.getElementById('articleid').value)"
        {% else %}
        onkeydown="if (event.keyCode == 13) {alert('Hãy đăng ký hoặc đăng nhập để được bình luận!'); document.getElementById('user_cm').innerHTML = document.getElementById('user_cm').innerHTML;window.location = '/login/';}"
        {% endif %}></textarea>
        <input type="hidden" name="userid" id="userid" value="{{user.id}}"/>
        <input type="hidden" name="articleid" id="articleid" value="{{inra.id}}"/>
    </div>
    <div id="post_cm">
        <div class="line_cm"></div>
        {% for com in comments %}
        <div class="detail_cm">
            <img src="{{STATIC_URL}}images/b.jpg"/>
            <p> <a href="#">{{com.userID.username}}</a>{{com.content}}</p>
            <div class="info_cm">
                <ul>
                    <li>{{com.postOnDate}}</li>
                    <li id="Vote_{{com.id}}" onclick="addLike(document.getElementById('userid').value, '{{com.id}}')"><a href="#">Vote</a></li>
                    <li><a href="#" class="spam">Spam</a></li>
                    <li><a id="Count_{{com.id}}">{{com.likeUser.count}}</a> Voted</li>
                </ul>
            </div>
        </div>
        <div class="line_cm"></div>
        {% endfor %}
    </div>
    <div class="box_new">
        <ul>
            <li>
                <h3 class="ch3" style="margin-left:-40px;color:#222;"><a href="{{n1.link}}?state=newtab" class="modal">{{ n1.title }}</a></h3>
                <div class="title_page3" style="margin-left:-30px;"> {{n1.description}}</div>
            </li>
            <div class="box_new_line"></div>
            <li>
                <h3 class="ch3" style="margin-top: 5px;padding-bottom:5px;margin-left:-40px;"><a href="{{n2.link}}?state=newtab" class="modal">{{ n2.title }}</a></h3>
                <div class="title_page3" style="margin-left:-30px;"> {{n2.description}}</div>
            </li>
            <div class="box_new_line"></div>
            <li>
                <h3 class="ch3" style="margin-top: 5px;padding-bottom:5px;margin-left:-40px;"><a href="{{n3.link}}?state=newtab" class="modal">{{ n3.title }}</a></h3>
                <div class="title_page3" style="margin-left:-30px;"> {{n3.description}}</div>
            </li>
            <div class="box_new_line"></div>
            <li>
                <h3 class="ch3" style="margin-top: 5px;padding-bottom:5px;margin-left:-40px;"><a href="{{n4.link}}?state=newtab" class="modal">{{ n4.title }}</a></h3>
                <div class="title_page3" style="margin-left:-30px;"> {{n4.description}}</div>
            </li>
        </ul>
    </div>
</div>
<div id="check">
    {{inra.contents}}
 </div>
{% endautoescape %}
{% endblock %}